<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-container">
			<view>
				<uni-search-bar placeholder="请输入搜索内容" bgColor="#EEEEEE"  @focus="gotoSearch" cancelButton="none"/>
			</view>
		</view>
		<!-- 店铺名 -->
		<u-button style="font-size: 0.99rem;color: #000000;font-family: electronicFont;">
		{{storeName}}
		</u-button>
		<!-- 导航条 -->
		<view>
		  <uni-segmented-control
		    :current="current"
		    :values="items.map((v) => v.title)"
		    @clickItem="onClickItem"
		    style-type="text"
		    active-color="red"
		  ></uni-segmented-control>
		  <view class="content">
			  <view v-if="current === 0"> 
			   <view class="content">
			   	<view class="wrap">
			   		<u-waterfall v-model="flowList" ref="uWaterfall">
			   			<template v-slot:left="{leftList}">
			   				<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @tap="gotoPro(item.productId,item.productByStore)">
			   					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
			   					<u-lazy-load threshold="-450" border-radius="10" :image="item.productImgUrl"
			   						:index="index"></u-lazy-load>
			   					<view class="demo-title">
			   						{{item.productName}}
			   					</view>
			   					<view class="demo-price">
			   						{{item.productPrice}}元
			   					</view>
			   					<view class="demo-tag">
			   						<view class="demo-tag-owner">
			   							自营
			   						</view>
			   						<view class="demo-tag-text">
			   							放心购
			   						</view>
			   					</view>
			   					<view class="demo-shop">
			   						{{item.productByStore}}
			   					</view>
			   
			   				</view>
			   			</template>
			   			<template v-slot:right="{rightList}">
			   				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @tap="gotoPro(item.productId,item.productByStore)">
			   					<u-lazy-load threshold="-450" border-radius="10" :image="item.productImgUrl"
			   						:index="index"></u-lazy-load>
			   					<view class="demo-title">
			   						{{item.productName}}
			   					</view>
			   					<view class="demo-price">
			   						{{item.productPrice}}元
			   					</view>
			   					<view class="demo-tag">
			   						<view class="demo-tag-owner">
			   							自营
			   						</view>
			   						<view class="demo-tag-text">
			   							放心购
			   						</view>
			   					</view>
			   					<view class="demo-shop">
			   						{{item.productByStore}}
			   					</view>
			   
			   				</view>
			   			</template>
			   		</u-waterfall>
			   		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
			   	</view>
			   
			   </view>
			</view>
			  <view v-if="current === 1">
				<!-- 分类部分 -->
						<view class="cate-container">
							<view class="cate-left">
								 <view :class="['cate-item',activeIndex==index?'active':'']" v-for="(item,index) in cateList" :key="index" @click="changeActive(index)">{{item.classifyName}}</view>
							</view>
							<view class="cate-right">
								<view class="cate-content" v-for="(goodItem,goodIndex) in goodList" :key="goodIndex" @tap="gotoTypeDetali(goodItem.text)">
									<image :src="goodItem.picUrl" mode="" style="border-radius:5px"></image>
									<view class="cate-text">{{goodItem.text}}</view>
								</view>
							</view>
						</view>
				</view>	
			</view>

		  </view>
		</view>
	</view>
</template>

<script>
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js';
	import {
		get,
		post,
		setToken
	} from '@/utils/api.js';
	import { UniSearchBar } from '@dcloudio/uni-ui';
	import { uniSegmentedControl } from '@dcloudio/uni-ui';
	import classify from '../../components/store/classify.vue';
	export default {
		data() {
			return {
			items: [
				{ title: "宝贝" },
				{ title: "分类" }
			],
			current: 0,	
			loadStatus: 'loadmore',
			flowList: [],
			list: [{}],
			storeName:'',
			goodList:[],
			// 初始化的分类列表及每个分类下的模拟商品信息
						cateList: [
							{
								classifyId: 1,
								classifyName: '宠物',
								children: [
			
								]
							},
							{
								classifyId: 2,
								classifyName: '宠物周边',
								children: [
			
								]
							}
						],
							// 当前点击项的索引号
							activeIndex:0
			}
		},
		onLoad() {
			this.onload();
			this.addRandomData();
			// 初始化时默认显示第一个分类的商品列表
			this.goodList = this.cateList[0].children
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1)
		},
		components:{
			UniSearchBar,
			uniSegmentedControl,
			classify
		},
		created() {
			// this.getProductList()
			if(uni.getStorageSync('storeName')){
				this.storeName = uni.getStorageSync('storeName')	
			}
		},
		beforeDestroy() {
			uni.removeStorageSync('storeName')
		},
		methods: {
			gotoPro(productId,productByStore) {
				uni.setStorageSync('productId',productId)
				uni.setStorageSync('productByStore',productByStore)
				uni.navigateTo({
					url:'/pages/proDetail/proDetail'
				})
			},
			
			onload() {
				if(uni.getStorageSync('storeName')){
					this.storeName = uni.getStorageSync('storeName')	
				}
				post('/product/by-store',
				{
				 storeName:this.storeName
				}, {
				  needToken: true, 
					success: (res) => {
					if (res.statusCode === 300) {
							uni.showToast({
								title: '网络错误',
								icon: 'none'
							})
					}
					else{
						this.list = res.data;
						this.flowList = res.data;
						this.updateCateListWithProducts(res.data)
					}
				  }
				}); 
			},
			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			onClickItem(e) {
			  if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			  }
			},
			gotoSearch() {
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			// getProductList() {
			//     post('/product/displayProductList',{}, {
			//         needToken: true,
			//         success: (res) => {
			//             if (res.statusCode === 200) {
			//                 this.updateCateListWithProducts(res.data);
			//             }
			//         }
			//     });
			// },
				updateCateListWithProducts(products) {
					products.forEach(product => {
						const { productType1, productId, productImgUrl, productType2 } = product;
			
						// 查找对应的分类节点
						const classifyNode = this.cateList.find(c => c.classifyName === productType1);
			
						// 如果分类存在，并且children数组中没有相同productType2的产品，则添加产品信息
						if (classifyNode) {
							const existingProduct = classifyNode.children.find(child => child.text === productType2);
							if (!existingProduct) {
								classifyNode.children.push({
									goodId: productId,
									text: productType2,
									picUrl: productImgUrl
								});
							}
						}
					});
				},
					//更改点击项的索引号
					changeActive(i){
						
						this.activeIndex=i
						// 更新当前选中分类的商品列表
						this.goodList = this.cateList[i].children;
					},
					gotoTypeDetali(text){
						if(text.includes('周边'))
						{
							uni.setStorageSync('petAccessories', text);
							uni.navigateTo({
								url:'/pages/petAccessories/petAccessories'
							})
						}
						else{
							uni.setStorageSync('petType', text);
							uni.navigateTo({
								url:'/pages/pet/pet'
							})	
						}
			
					},
					gotoSearch() {
						uni.navigateTo({
							url:'/pages/search/search'
						})
					}
		},
		onShow(){
			//根据点击不同分类默认选中对应标签
		  if(uni.getStorageSync('categoryName') === '宠物')
		  {
			  this.activeIndex = 0
			  this.changeActive(0)
		  }
		  else  if(uni.getStorageSync('categoryName') === '宠物周边')
		  {
			  this.activeIndex = 1
			  this.changeActive(1)
		  }
		  else{
			  this.activeIndex = 0
		  }
		}
	}
</script>

<style lang="scss">
.search-container {
  width: 90%; /* 调整搜索框宽度，留出两边间隙 */
  margin: 0 auto; /* 水平居中 */
  margin-top: 1px; /* 根据需要调整与顶部的距离 */
}
	body,
	.content {
		background-color: #dea01f;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
</style>
<style lang="scss">
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
	.classify {
	  display: flex;
	  flex-direction: column; /* 使内容垂直排列 */
	}
	
		.cate-container{
			width: 100%;
			display: flex;
			.cate-left{
				width: 200rpx;
				background-color: #ffffff;
				.cate-item{
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					padding-left: 40rpx;
					box-sizing: border-box;
				}
				.active{
					background-color: #ffefe6;
					position: relative;
					padding-left: 40rpx;
					box-sizing: border-box;
					&::before{
						content: '';
						display:block;
						width: 10rpx;
						border-radius: 6rpx;
						height: 40rpx;
						background-color: #FC4353;
						position: absolute;
						left: 0rpx;
						top: 30rpx;
					}
				}
			}
			.cate-right{
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				margin-top: 50rpx;
				// background-color: #dea01f;
				.cate-content{
					width: 33%;
					height: 200rpx;
					text-align: center;
					image{
						width: 100rpx;
						height: 100rpx;
					}
					.cate-text{
						font-size: 34rpx;
					}
				}
			}
		}
</style>
